<template>
	<gradient-background>
		<custom-navbar :title="'解析'"></custom-navbar>
		
		<view class="container">
			<view class="content">
				
				<!-- 学习资料 -->
				<view class="learning-section">
					<view class="section-header">
						<text class="section-title">学习资料</text>
					</view>
					
					<view class="learning-grid">
						<view class="learning-card" @tap="openBasicKnowledge">
							<view class="learning-icon">📚</view>
							<text class="learning-title">基础知识</text>
						</view>
						
						<view class="learning-card" @tap="openElementTheory">
							<view class="learning-icon">⚡</view>
							<text class="learning-title">五行理论</text>
						</view>
						
						<view class="learning-card" @tap="openHexagramGuide">
							<view class="learning-icon">🎯</view>
							<text class="learning-title">起卦指南</text>
						</view>
						
						<view class="learning-card" @tap="openInterpretation">
							<view class="learning-icon">🧭</view>
							<text class="learning-title">解卦方法</text>
						</view>
					</view>
				</view>
				
				<!-- 占卜记录 -->
				<view class="records-section">
					<view class="section-header">
						<text class="section-title">最近占卜</text>
						<text class="view-all" @tap="viewAllRecords">查看全部</text>
					</view>
					
					<scroll-view scroll-y class="records-list" v-if="recentRecords.length > 0">
						<view v-for="record in recentRecords" :key="record.timestamp" class="record-item" @tap="viewRecord(record)" v-if="record.hexagram">
							<view class="record-symbol">
								<text class="symbol-text">{{ record.hexagram.fullSymbol }}</text>
							</view>
							<view class="record-info">
								<text class="record-name">{{ record.hexagram.name }}</text>
								<text class="record-time">{{ record.timeStr }}</text>
							</view>
							<view class="arrow-icon">
								<text>→</text>
							</view>
						</view>
					</scroll-view>
					
					<view v-else class="empty-records">
						<text class="empty-icon">📋</text>
						<text class="empty-text">暂无占卜记录</text>
						<text class="empty-tip">去首页开始您的第一次占卜吧</text>
					</view>
				</view>
			</view>
		</view>
	</gradient-background>
</template>

<script>
import GradientBackground from '@/components/gradient-background/gradient-background.vue'
import CustomNavbar from '@/components/custom-navbar/custom-navbar.vue'
import { Hexagram } from '@/utils/hexagram-service.js'

export default {
	name: 'AnalysisPage',
	components: {
		GradientBackground,
		CustomNavbar
	},
	data() {
		return {
			recentRecords: [],
			navigating: false // 防止重复导航
		}
	},
	onLoad() {
		this.loadRecentRecords();
	},
	onShow() {
		// 页面显示时重新加载记录，以防有新的占卜记录
		this.loadRecentRecords();
	},
	methods: {
		loadRecentRecords() {
			console.log('Analysis - loadRecentRecords');
			
			uni.getStorage({
				key: 'divination_records',
				success: (res) => {
					const allRecords = res.data || [];
					console.log('Analysis - allRecords:', allRecords.length);
					
					// 只显示最近5条记录，并过滤掉无效记录
					this.recentRecords = allRecords.slice(0, 5)
						.map(record => {
							try {
								if (!record.hexagram) {
									console.warn('Analysis - record.hexagram is null:', record);
									return null;
								}
								
								const hexagram = Hexagram.fromObject(record.hexagram);
								if (!hexagram) {
									console.warn('Analysis - failed to create hexagram:', record.hexagram);
									return null;
								}
								
								return {
									...record,
									hexagram: hexagram
								};
							} catch (error) {
								console.error('Analysis - error processing record:', error, record);
								return null;
							}
						})
						.filter(record => record !== null); // 过滤掉无效记录
					
					console.log('Analysis - processed records:', this.recentRecords.length);
				},
				fail: (error) => {
					console.log('Analysis - no storage records:', error);
					this.recentRecords = [];
				}
			});
		},
		
		// 记录相关方法
		viewAllRecords() {
			uni.showToast({
				title: '查看全部记录功能开发中',
				icon: 'none'
			});
		},
		
		viewRecord(record) {
			if (this.navigating) return;
			this.navigating = true;
			uni.navigateTo({
				url: `/pages/hexagram-detail/hexagram-detail?hexagram=${encodeURIComponent(JSON.stringify(record.hexagram.toObject()))}`,
				complete: () => {
					setTimeout(() => {
						this.navigating = false;
					}, 1000);
				}
			});
		},
		
		// 学习资料方法
		openBasicKnowledge() {
			uni.showToast({
				title: '基础知识功能开发中',
				icon: 'none'
			});
		},
		
		openElementTheory() {
			uni.showToast({
				title: '五行理论功能开发中',
				icon: 'none'
			});
		},
		
		openHexagramGuide() {
			uni.showToast({
				title: '起卦指南功能开发中',
				icon: 'none'
			});
		},
		
		openInterpretation() {
			uni.showToast({
				title: '解卦方法功能开发中',
				icon: 'none'
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.content {
	flex: 1;
	padding: 32rpx;
}


.records-section, .learning-section {
	margin-bottom: 48rpx;
	
	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;
		
		.section-title {
			font-size: 32rpx;
			font-weight: 500;
			color: #000000;
		}
		
		.view-all {
			font-size: 24rpx;
			color: #6A82FB;
		}
	}
}

.records-list {
	max-height: 400rpx;
	
	.record-item {
		display: flex;
		align-items: center;
		padding: 24rpx;
		margin-bottom: 12rpx;
		background-color: rgba(255, 255, 255, 0.9);
		border-radius: 16rpx;
		box-shadow: 0 2rpx 8rpx rgba(106, 130, 251, 0.08);
		transition: transform 0.2s ease;
		
		&:active {
			transform: scale(0.98);
		}
		
		.record-symbol {
			margin-right: 20rpx;
			
			.symbol-text {
				font-size: 40rpx;
				line-height: 1;
			}
		}
		
		.record-info {
			flex: 1;
			
			.record-name {
				display: block;
				font-size: 28rpx;
				color: #000000;
				margin-bottom: 4rpx;
			}
			
			.record-time {
				display: block;
				font-size: 22rpx;
				color: rgba(0, 0, 0, 0.7);
			}
		}
		
		.arrow-icon {
			margin-left: 12rpx;
			color: rgba(0, 0, 0, 0.7);
			font-size: 20rpx;
		}
	}
}

.empty-records {
	text-align: center;
	padding: 80rpx 32rpx;
	
	.empty-icon {
		font-size: 96rpx;
		margin-bottom: 24rpx;
		display: block;
	}
	
	.empty-text {
		display: block;
		font-size: 32rpx;
		color: #000000;
		margin-bottom: 12rpx;
	}
	
	.empty-tip {
		display: block;
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.7);
	}
}

.learning-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20rpx;
	
	.learning-card {
		background-color: rgba(255, 255, 255, 0.9);
		border-radius: 20rpx;
		padding: 24rpx;
		text-align: center;
		box-shadow: 0 2rpx 8rpx rgba(106, 130, 251, 0.08);
		transition: transform 0.2s ease;
		
		&:active {
			transform: scale(0.98);
		}
		
		.learning-icon {
			font-size: 48rpx;
			margin-bottom: 12rpx;
		}
		
		.learning-title {
			display: block;
			font-size: 26rpx;
			color: #000000;
		}
	}
}
</style>